<html><head>
  <title>jQuery-cropbox</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <link type="text/css" media="screen" rel="stylesheet" href="uncompressed/jquery.cropbox.css">
  <style type="text/css">
    body {
      font-family : sans-serif;
      font-size   : 13px;
    }
    .results {
      font-family : monospace;
      font-size   : 20px;
    }
  </style>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="uncompressed/jquery.cropbox.js"></script>
 
</head>
<body style="">

      <img id="cropimage" src="images/Koala.jpg"  style="width: 560px;">
      

  <br/><br/><br/>
  <div class="download">
      <a class="download2">Download</a>
  </div>
      <input type="button" onclick="createCrop()" value="createCrop" >
      <input type="button" onclick="removeCrop()" value="remove" >
  
 <script type="text/javascript">

//      
//        var image = $('#cropimage'),
//            cropwidth = 300,
//            cropheight = 200;
//       
//         
//	 image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto'} )
//            .on('cropbox', function( event, img ) {
//             // console.log(img.getDataURL());
//             
//            });
      

//      $('#select').on('change', function () {
//          var size = parseInt(this.value);
//          $('.cropimage').each(function () {
//            $(this).cropbox({width: size, height: size})
//          });
//      });

  function createCrop() {
		
		var image = $('#cropimage'),
			cropwidth = 300,
			cropheight = 200;
		//download = $('.download').find('a').index(0);


		image.cropbox({width: cropwidth, height: cropheight, showControls: 'auto'})
			.on('cropbox', function(event, img) {
			    // console.log(img.getDataURL());

			});
	    }
    function removeCrop(){
	var crop = $('#cropimage').data('cropbox');
	 $('.download2').attr('href', crop.getDataURL());
	 $('.download2').attr('download', 'crop.png');
	crop.remove();
	 
	
    }
  </script>
</body></html>